<template>
  <div class="recommend">
    <form>
      <i></i>
      <router-link to="/searchindex">
        <input type="text" placeholder="请输入歌手、歌曲" />
      </router-link>
    </form>
    <Banner></Banner>
    <BorderTittle>推荐歌单</BorderTittle>
    <ul class="recommendList">
      <ImgList
        v-for="item in recommendList"
        :key="item.id"
        :item="item"
      ></ImgList>
    </ul>
    <Loading v-if="recommendList.length == 0"></Loading>
    <BorderTittle>最新音乐</BorderTittle>
    <SongList
      v-if="newSongList"
      :songs="newSongList"
      @play="$emit('play', $event)"
    ></SongList>
    <Loading v-if="newSongList.length == 0"></Loading>
  </div>
</template>
<script>
import Banner from "@/components/Banner";
import BorderTittle from "@/components/BorderTittle";
import ImgList from "@/components/ImgList";
import SongList from "@/components/SongList";
import Loading from "@/components/Loading";
export default {
  name: "Recommend",
  data() {
    return {
      recommendList: [],
      newSongList: [],
      limit:20
    };
  },
  created() {
    this.$http
      .get("/personalized")
      .then((d) => {
        this.recommendList = d.data.result.slice(0, 6);
      })
      .catch((err) => {
        console.log(err);
      });
    this.$http
      .get("/personalized/newsong", {
        params: { limit: 20 },
      })
      .then((d) => {
        this.newSongList = d.data.result;
        // console.log(d);
      });
  },
  components: {
    Banner,
    BorderTittle,
    ImgList,
    SongList,
    Loading,
  },
};
</script>
<style lang="less" scoped>
.recommend {
  // margin-top: 40px;
  .recommendList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  form {
    padding: 15px 10px;
    position: relative;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    i {
      width: 13px;
      height: 13px;
      background-image: url();
      position: absolute;
      left: 12px;
      top: 24px;
      margin: 0 8px;
      z-index: 3;
    }
    input {
      position: relative;
      width: 100%;
      height: 30px;
      padding: 0 30px;
      box-sizing: border-box;
      background: #ebecec;
      border-radius: 30px;
    }
  }
}
</style>